<template>
  <div class="home">
    <div class="title"></div>
    <!--轮播图 -->
    <van-swipe class="swipe" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in carousel" :key="index">
        <img width="100%" v-lazy="image.url" />
      </van-swipe-item>
    </van-swipe>

    <!-- 导航栏 -->
    <van-grid class="my-grid">
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>

    <!-- 订单列表 -->
    <div class="my-order">
      <div class="orderTitle">我的订单</div>
      <div class="orderItem" v-for="(item, index) in 8" :key="index">
        <div class="orderImg">
          <van-image
            round
            width="5rem"
            height="5rem"
            lazy-load
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <div class="orderDes">
          <span class="name">name</span>
          <span class="status">status</span>
          <p class="adress">adress</p>
          <span class="time">time</span>
          <span class="price">price</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "@/http/axios.js";
import { mapActions } from 'vuex';
import qs from 'qs'
export default {
  data() {
    return {
      status: "",
      carousel: [],
      productcategory: [],
      product: [],
    };
  },
  methods: {
    
    // 查询所有轮播图
    findAllCarousel() {
      get("/carousel/query").then((res) => {
        this.carousel = res.data.data;
      });
    },
  },
  created() {
    this.findAllCarousel();
  },
};
</script>
<style scoped>
.home .title {
  height: 130px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  color: #fff;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  font-size: 29px;
  padding-top: 5px;
}
.home .swipe {
  height: 160px;
  width: 90%;
  position: absolute;
  top: 136px;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px 0 #aaa;
  border-radius: 8px;
}
.home .my-grid {
  margin-top: 100px;
  cursor: pointer;
}
.home .my-order {
  padding: 0 1.5em;
  margin-top: 1em;
}
.home .my-order .orderTitle {
  text-align: left;
}

.home .my-order .orderItem {
  width: 90%;
  height: 100px;
  padding: 10px;
  margin: 10px 0 10px 0;
  box-shadow: 0 0 6px 0 #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
.home .my-order  .orderItem .orderImg {
  width: 80px;
  height: 80px;
}
.home .my-order .orderItem .orderDes {
  margin-left: 1em;
  background-color: rgb(34, 197, 135);
  flex:2;
  padding: 2px;
  
}

.home .my-order .orderItem .orderDes .status{
  float: right;
}

.home .my-order .orderItem .orderDes .price{
  float: right;
}
</style>